<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消防主机上位机仪表盘</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap5.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"
            integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="card" id="main">
    <div class="card-header">
        <h5 class="" id="state">消防主机上位机仪表盘
            <div style="float: right">
                <button id="viewLog" class="btn-info" onclick="window.open('viewLog','_blank')">查看运行日志</button>
                <button id="clear" class="btn-danger">清空运行时数据</button>
            </div>
        </h5>
    </div>
    <div class="card-body">
        <div style="width: 70%;height: 50%; margin-left: auto; margin-right: auto;">
            <canvas id="lineChart"></canvas>
        </div>
        <div style="margin-top: 25px">
            <table id="dashboard" class="table table-bordered" style="width:100%">
                <thead class="table-active">
                <tr>
                    <th>消防主机IP</th>
                    <th>原始请求报文</th>
                    <th>请求内容</th>
                    <th>请求时间</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        let table = $('#dashboard').DataTable({
            "ajax": 'getServerStatus',
            searching: false,
            paging: false,
            info: false,
            "order": [[3, "desc"]
            ],
            columns: [
                {data: 'ip'},
                {data: 'rawMsg'},
                {data: 'convertedMsg'},
                {data: 'requestDate'},
            ],
        });

        $("#clear").click(function () {
            $.post({
                url: "clearData",
                success: function (res) {
                    if (res == "ok") {
                        updateChart([], 8)
                        table.ajax.reload(null, false);
                    }
                }
            })
        })

        // websocket
        {
            var socket;

            if (!window.WebSocket) {
                window.WebSocket = window.MozWebSocket;
            }

            if (window.WebSocket) {
                socket = new WebSocket("ws://localhost:88");

                socket.onmessage = function (event) {
                    let data = JSON.parse(event.data)
                    console.log(data)
                    updateChart(data, 8)
                    table.ajax.reload(null, false);
                };

                socket.onopen = function (event) {
                    console.log("打开WebSoket 服务正常，浏览器支持WebSoket!" + "\r\n")
                    socket.send("1326")
                };

                socket.onclose = function (event) {
                    console.log("WebSocket 关闭" + "\r\n")
                };
            } else {
                alert("您的浏览器不支持WebSocket协议！");
            }

            function send(message) {
                if (!window.WebSocket) {
                    return;
                }
                if (socket.readyState == WebSocket.OPEN) {
                    socket.send(message);
                } else {
                    alert("WebSocket 连接没有建立成功！");
                }
            }
        }

        //draw
        {
            let labels = [];
            let alarmCount = [];
            let faultCount = [];
            let detectorCount = [];
            let ctxL = document.getElementById("lineChart").getContext('2d');
            let myLineChart = new Chart(ctxL, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: "报警个数",
                        data: alarmCount,
                        backgroundColor: [
                            'rgba(105, 0, 132, .2)',
                        ],
                        borderColor: [
                            'rgba(255,0,0,0.7)',
                        ],
                        borderWidth: 2
                    }, {
                        label: "故障个数",
                        data: faultCount,
                        backgroundColor: [
                            'rgba(0, 137, 132, .2)',
                        ],
                        borderColor: [
                            'rgba(255,0,251,0.7)',
                        ],
                        borderWidth: 2
                    }, {
                        label: "探测器个数",
                        data: detectorCount,
                        backgroundColor: [
                            'rgba(0, 137, 132, .2)',
                        ],
                        borderColor: [
                            'rgba(0,15,255,0.7)',
                        ],
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            max: 50,
                            min: 0,
                            ticks: {
                                stepSize: 1
                            }
                        },
                    },
                    plugins: {
                        title: {
                            display: true,
                            text: '系统信息',
                            // color: 'blue',
                            padding: 0
                        }
                    }
                }
            });

            function updateChart(newData, len) {
                labels = []
                alarmCount = []
                faultCount = []
                detectorCount = []
                if (newData.length > len) {
                    newData = newData.slice(newData.length - len, newData.length)
                }
                for (let k in newData) {
                    labels.push(newData[k]["requestDate"].slice(6))
                    alarmCount.push(newData[k]["convertedData"]['alarmCount'])
                    faultCount.push(newData[k]["convertedData"]['faultCount'])
                    detectorCount.push(newData[k]["convertedData"]['detectorCount'])
                }
                myLineChart.data.labels = labels;
                myLineChart.data.datasets[0].data = alarmCount
                myLineChart.data.datasets[1].data = faultCount
                myLineChart.data.datasets[2].data = detectorCount
                myLineChart.update()
            }
        }
    })
</script>
</body>
</html>